<template>
    <div id="login">
        <div class="bg-box">
            <div class="bg-left">
                <img src="../assets/images/novel_illu.png" alt="">
            </div>
            <div class="login-box">
                <div class="title-box">
                    <h5>{{this.$store.state.webName}}后台</h5>
                </div>
                <div class="login-box-input">
                    <div class="input-box">
                        <el-input placeholder="请输入账户" v-model="username" clearable class="login-input"
                                  @keyup.enter.native="login"></el-input>
                        <img src="../assets/images/novel_login_icon1.png" alt="" class="input-icon">
                    </div>
                    <div class="input-box">
                        <el-input placeholder="请输入密码" v-model="password" type="password" clearable
                                  class="login-input" @keyup.enter.native="login" show-password></el-input>
                        <img src="../assets/images/novel_login_icon2.png" alt="" class="input-icon">
                    </div>

                    <div class="get-code input-box">
                        <el-input placeholder="请输入验证码" v-model="code" type="text" clearable
                                  @keyup.enter.native="login"></el-input>
                        <div @click="getCode">
                            <img :src="identifyCode" alt="" class="identifyCode">
                        </div>
                        <img src="../assets/images/novel_login_icon3.png" alt="" class="input-icon">
                    </div>

                    <div class="login-button">
                        <el-button type="primary" @click="login" style="width: 100%">登录</el-button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
  // import SIdentify from '../components/identify.vue'

  export default {
    name: "login",
    metaInfo() {
      return {
        title: this.$store.state.webName, // set a title
      }
    },
    data() {
      return {
        username: '',
        password: '',
        code: '',
        identifyCode: '',
        key: '',
      }
    },
    created() {
      sessionStorage.clear();
      this.getCode();
      this.getWebName()
    },
    methods: {
      login() {
        let data = {name: this.username, password: this.password, captcha: this.code, key: this.key};
        this.$ajax({
          method: 'post',
          url: 'admin/login',
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
          },
          data: data,
        }).then((res) => {
          sessionStorage.setItem("token", res.data.access_token);
          this.$router.push({
            path: '/home'
          })
        }).catch((err) => {
          this.$message.error(err.message);
          if (err.message == '验证码错误') {
            this.getCode();
          }
        });
      },
      getCode() {
        this.$axios.get("admin/create_captcha", '').then((res) => {
          this.identifyCode = res.data.captcha;
          this.key = res.data.key;
        });
      },
      getWebName() {
        this.$axios.post("admin/common/getSiteName").then((res) => {
          this.$store.dispatch('getNewName', res.message)
        });
      }
    }
  }
</script>

<style scoped lang="less">
    @media screen and (max-width: 750px) {
        #login {
            width: 100%;
            height: 100%;
            /*background: url("../assets/images/bg.jpg") no-repeat;*/

            .bg-box {
                width: 100%;
                height: 640px;
                background: white;
                display: flex;
                position: fixed;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
            }

            .bg-left {
                display: none;

                img {
                    width: 589px;
                    height: 484px;
                }
            }


            .login-box {
                width: 400px;
                height: 400px;
                background: rgba(255, 255, 255, 0.7);
                border-radius: 8px;
                padding: 10px 30px 10px 30px;
                box-sizing: border-box;
            }


            .login-box {
                .title-box {
                    padding-top: 80px;
                    padding-bottom: 50px;
                }

                .title-box h5 {
                    text-align: center;
                    font-size: 24px;
                    font-family: PingFang SC;
                    font-weight: bold;
                    color: rgba(10, 28, 51, 1);
                }

                .login-input {
                    width: 300px;
                    box-sizing: border-box;
                }

                .login-box-input {
                    margin: 0 auto;
                    width: 300px;
                }
            }


            .login-button {
                margin-top: 40px;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .get-code {
                display: flex;
            }

            .identifyCode {
                width: 100px;
                height: 40px;
                margin-left: 10px;
                border-radius: 6px;
            }

            .input-box {
                position: relative;
                margin-bottom: 36px;

                .input-icon {
                    position: absolute;
                    left: 10px;
                    top: 50%;
                    transform: translateY(-50%);
                    width: 13px;
                    height: 15px;
                }
            }

        }
    }

    @media screen and (min-width: 750px) {
        #login {
            width: 100%;
            height: 100%;
            background: url("../assets/images/bg.jpg") no-repeat;

            .bg-box {
                width: 1200px;
                height: 640px;
                background: white;
                display: flex;
                position: fixed;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
            }

            .bg-left {
                width: 700px;
                height: 640px;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .bg-left {
                img {
                    width: 589px;
                    height: 484px;
                }
            }

            .login-box {
                width: 400px;
                height: 400px;
                background: rgba(255, 255, 255, 0.7);
                border-radius: 8px;
                padding: 10px 30px 10px 30px;
                box-sizing: border-box;
            }

            .login-box {
                .title-box {
                    padding-top: 80px;
                    padding-bottom: 50px;
                }

                .title-box h5 {
                    text-align: center;
                    font-size: 36px;
                    font-family: PingFang SC;
                    font-weight: bold;
                    color: rgba(10, 28, 51, 1);
                }

                .login-input {
                    width: 300px;
                    box-sizing: border-box;
                }

                .login-box-input {
                    margin: 0 auto;
                    width: 300px;
                }
            }


            .login-button {
                margin-top: 40px;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .get-code {
                display: flex;
            }

            .identifyCode {
                width: 100px;
                height: 40px;
                margin-left: 10px;
                border-radius: 6px;
            }

            .input-box {
                position: relative;
                margin-bottom: 36px;

                .input-icon {
                    position: absolute;
                    left: 10px;
                    top: 50%;
                    transform: translateY(-50%);
                }
            }

        }
    }

</style>